import React from 'react'
import { Button, List, InputItem, WhiteSpace, WingBlank, Toast } from 'antd-mobile'
import { createForm } from 'rc-form'
import { connect } from 'react-redux'
import { Redirect } from 'react-router-dom'

import Alert from '@/components/Alert'
import Logo from '@/components/Logo'
import { userReset, login } from '@/redux/User.redux'

@connect(
    state => state.user,
    { userReset, login }
)
class Login extends React.Component{

    constructor(props){
        super(props)
        this.register = this.register.bind(this)
        this.login = this.login.bind(this)
    }

    register(){
        this.props.userReset()
        this.props.history.push('/register')
    }

    login(){
        const { form } = this.props
        form.validateFields({ force: true }, (err, fields) => {
            if(err) return
            this.props.login(fields)
        })
    }

    validate = (rule, value, callback) => {
        if(value.indexOf(' ') !== -1)
            return callback(new Error('不能含有空格'))
        callback()
    }

    render(){
        const { form: {getFieldError, getFieldDecorator}, code, message, redirect } = this.props
        return (
            <WingBlank size="md">
                { code === 0 && <Redirect to={redirect}/> }
                <Logo/>
                { code === 1 && <Alert message={message} type="error"/> }
                <List>
                    {
                        getFieldDecorator('username',{
                            initialValue: '',
                            rules: [
                                { required: true, message: '用户名不能为空' },
                                { validator: this.validate },
                            ],
                        })(
                            <InputItem
                                clear={true}
                                error={ !!getFieldError('username') }
                                onErrorClick={() => {
                                    Toast.fail(getFieldError('username')[0], 1.2)
                                }}
                            >用户名</InputItem>
                        )
                    }
                    {
                        getFieldDecorator('password',{
                            initialValue: '',
                            rules: [
                                { required: true, message: '密码不能为空' },
                                { validator: this.validate },
                            ],
                        })(
                            <InputItem
                                type='password'
                                clear={true}
                                error={ !!getFieldError('password') }
                                onErrorClick={() => {
                                    Toast.fail(getFieldError('password')[0], 1.2)
                                }}
                                onKeyDown={(e) => {
                                    if(e.keyCode === 13){
                                        this.login()
                                    }
                                }}
                            >密码</InputItem>
                        )
                    }
                </List>
                <WhiteSpace/>
                <Button type="primary" onClick={this.login}>登录</Button>
                <WhiteSpace/>
                <Button type="primary" onClick={this.register}>注册</Button>
            </WingBlank>
        )
    }
}

export default createForm()(Login)